<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>开机动画</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			position: fixed;
			bottom: 0;
			right: 0;
		}
		button {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			height: 30px;
			cursor: pointer;
			border: none;
			outline: none;
			background-color: transparent;
		}
	</style>
</head>
<body>
	<div class="box" style="bottom:0;right: 0;">
		<button></button>
		<img src="images/t.jpg" alt="" >
	</div>
	<script>
	// 动画	
		function animate(dom,obj,fn){
			// 调用函数时 先清空计时器
			clearInterval(dom.time);
			dom.time = setInterval(function(){
				// 遍历对象
				for(var key in obj) {
					// dom元素当前的宽度 只要数字 不要px parseInt()
					var current = parseInt(dom.style[key]);
					console.log(dom.style[key])
					// 目标宽度
					var target = parseInt(obj[key]);
					// 步长  Math.abs() 解决负数问题
					var step = Math.ceil( Math.abs((target - current)/10 ));
					step = target>current?step:-step ;	
					current += step;
					dom.style[key] = current + "px"; 
					if(current == target) {
						clearInterval(dom.time)
						if(fn){
							fn();		
						}
					}
				}
				console.log(1)
			},10)

		}
		var btn = document.querySelector("button");
		var box = document.querySelector(".box");
		btn.onclick = function() {
			animate(box,{bottom:-100},function(){
				animate(box,{right:-200})
			})
		}
	</script>
</body>
</html>